<script setup>
// 公共步骤组件
const props = defineProps({
  // 步骤条数据
  stepData: {
    type: Array,
    required: true,
    default: () => [],
  },
  // 当前激活的步骤
  activeStep: {
    type: Number,
    required: true,
    default: 0,
  },
  // 当前激活的横线
  activeLine: {
    type: Number,
    default: -1,
  },
});
</script>

<template>
  <div class="custom-step-box">
    <template v-for="(item, index) in props.stepData" :key="index">
      <div class="each-step" :class="{ 'active-step': activeStep >= index }">{{ item.label }}</div>
      <div
        v-show="index !== props.stepData.length - 1"
        class="step-line"
        :class="{ 'active-line': activeLine >= index }"
      />
    </template>
  </div>
</template>

<style scoped lang="less">
@import './customStep.less';
</style>
